<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/注册.css">
    <link rel="stylesheet" href="../css/reset.css">
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
    <script src="../js/api.js"></script>
    <script src="../js/axios.min .js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
    <div class="topWrap">
        <header class="nav">
            <div class="nav-top">
                <div class="nav-left">
                    <h1><a href="../html/首页.html"><img src="../img/logo.png" alt=""></a></h1>
                </div>
                <div class="nav-right">
                    <span class="glyphicon glyphicon-search"></span>
                    <div>
                        <h2 class="glyphicon glyphicon-search"></h2>
                        <input type="text" value="搜索">
                    </div>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-heart-empty"></span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <h2 class="glyphicon glyphicon-shopping-cart"></h2>

                            </a>
                            <strong class="cat">0</strong>
                        </li>
                        <li class="dl">
                            <a href="#">
                                <h3 class="glyphicon glyphicon-user"></h3>

                            </a>
                            <ul class="login">
                                <li><a href="../html/注册.html">注册</a></li>
                                <li><a href="../html/登录.html">登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-button">
                <div class="nav-navs">
                    <ul>
                        <li class="shop">
                            <a href="../html/商城.html">
                                <span>商店</span>

                            </a>
                            <div class="zong">
                                <div class="zou">
                                    <h2>主题</h2>
                                    <p><a href="#">可爱的高尔夫用品</a></p>
                                    <p><a href="#">寻欢作乐</a></p>
                                    <p><a href="#">可爱的家灯</a></p>
                                    <p><a href="#">蓬松舒适的项目</a></p>
                                    <p><a href="#">嘀嗒式数字时钟</a></p>
                                </div>
                                <div class="zhong">
                                    <h2>类别</h2>
                                    <p><a href="#">玩具</a></p>
                                    <p><a href="#">电子学</a></p>
                                    <p><a href="#">家庭</a></p>
                                    <p><a href="#">活的</a></p>
                                    <p><a href="#">学校及办事处</a></p>
                                    <p><a href="#">体育</a></p>
                                    <p><a href="#">时尚</a></p>
                                    <p><a href="#">美</a></p>
                                </div>
                                <div class="you">
                                    <h2>人物</h2>
                                    <p><a href="#">布朗和朋友</a></p>
                                    <p><a href="#">BT 21</a></p>
                                    <p><a href="#">斗殴明星</a></p>
                                </div>
                            </div>
                        </li>

                        <li class="houre">
                            <a href="#">
                                <span>8小时</span>
                                <div class="zong2">
                                    <div class="zou">
                                        <img src="../img/1.png" alt="">
                                    </div>
                                    <div class="zhong">
                                        <h2>BT21 BABY JELLY CANDY MINI DOLL</h2>
                                        <p>
                                            <a href="#">Squishy Gummies Are They Real Jellies?<br>
                                                Their plump arms, legs and round shape make <br> them extra charming.
                                                Their
                                                adorable size fits right <br> into your hand! Wrapped in snack packages,
                                                they <br> are
                                                much lovelier than actual gummies.
                                            </a>
                                        </p>
                                        <button class="btn"> <a href="#">GO TO 8-hours</a> </button>
                                    </div>
                                    <div class="you">
                                        <div class="pic">
                                            <img src="../img/zong/1.png" alt="">
                                            <img src="../img/zong/2.png" alt="">
                                            <img src="../img/zong/3.png" alt="">
                                            <img src="../img/zong/4.png" alt="">
                                            <img src="../img/zong/5.png" alt="">
                                            <img src="../img/zong/6.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="houre1"> <span><a href="#">档案馆</a></span></li>
                        <li class="houre2"> <span><a href="#">通知</a></span></li>
                        <li class="houre3"> <span><a href="#">关于</a></span></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="banner">
        <h2>创建账户</h2>
        <div class="use">
            <p>账号*</p>
            <input class="ipt1" type="text"> <br>
            <span class="spa1"></span>
        </div>
        <!--  -->
        <div class="use">
            <p>密码*</p>
            <input class="ipt2" type="password"><br>
            <span class="spa2"></span>
        </div>
        <!--  -->
        <div class="use">

            <button class="btn"><a href="#">创建账户</a></button>

        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="end">
        <div class="end-top">
            <div class="ipt">
                <h4>订阅我们的通信</h4>
                <input class="text" type="text" value="Enter e-mail here">
                <span class="iconfont"><a href="#">&#xe61a;</a></span>
                <input class="checkbox" type="checkbox">
                <p>我接受 <a href="#">条款和条件</a> 和 <a href="#">隐私政策</a> </p>
            </div>
            <div class="ipt-ri">
                <ul>
                    <li>
                        <h2><a href="#">商店</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">全买</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">八小时</a></li>
                </ul>
                <!--  -->
                <ul>
                    <li>
                        <h2><a href="#">通知</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">航运信息</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">回报与交换</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">条款和条件</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">隐私政策</a></li>
                </ul>
                <!--  -->
                <ul style="width: 200px;">
                    <li>
                        <h2><a href="#">支撑</a></h2>
                    </li>
                    <li><a style="color: gray; font-size: 14px;" href="#">客服服务</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">太阳星期五</a></li>
                    <li><a style="color: gray; font-size: 14px;" href="#">下午19:00-2:00(PDT)</a></li>
                </ul>
            </div>
        </div>
        <div class="end-buttom">
            <div class="end-left">
                <p>电话号码：726-87-00030 CEO：Seong Hoon Kim <br>地址：韩国汉城永山谷汉南达罗98楼5楼</p>
                <span><a href="#">2021年，行友公司由线友设计</a></span>
            </div>
            <div class="end-right">
                <img src="../img/end/1.png" alt="">
            </div>
        </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <script>
        // 注册、登录跳转按钮
        $(".dl").click(function () {
            $(".login").css("display", "block")
            // $(".dl").click(function () {
            //     $(".login").css("display", "none")
            // });
        });
        // 鼠标点进输入框（1），提示信息
        let isUsername = false;
        let isPassword = false;
        $(".ipt1").focus(function () {
            $(".spa1").html("6-18，数字 字母 下线 ，字母开头");
            $(".spa1").css("color", "red");
        });
        $(".ipt1").blur(function () {
            let reg = /^[a-z]\w{5,17}$/i;
            if (this.value.length < 6) {
                $(".spa1").html("长度不够6位");
                $(".spa1").css("color", "red");
                isUsername = false;
            } else {
                if (reg.test(this.value)) {
                    $(".spa1").html("格式正确");
                    $(".spa1").css("color", "green");
                    console.log("提出申请");
                    let username = $(".ipt1").val();
                    let params = { username };
                    // 
                    axios.get(checkusernameAPI,
                        { params }
                    ).then((res) => {
                        let obj = res.data;
                        console.log(obj);
                        $(".spa1").html(obj.msg);
                        if (obj.code == 1) {
                            $("spa1").css("color", "green");
                            isUsername = true;
                        } else {
                            $(".spa1").css("color", "red");
                            isUsername = false;
                        }
                    });
                } else {
                    $(".spa1").html("格式错误");
                    $(".spa1").css("color", "red");
                    isUsername = false;
                }
            }
        });
        // 密码框验证
        $(".ipt2").focus(function () {
            $(".spa2").html("6-16个字符，区分大小写");
            $(".spa2").css("color", "gray");
        });
        $(".ipt2").blur(function () {
            let reg = /^\S{6,16}$/;
            if (reg.test(this.value)) {
                $(".spa2").html("格式正确");
                $(".spa2").css("color", "green");
                isPassword = true;
            } else {
                $(".spa2").html("格式错误");
                $(".spa2").css("color", "red");
                isPassword = false;
            }
        });
        // btn加点击，发起注册请求
        $(".btn").click(async function () {
            if (isUsername && isPassword) {
                let username = $(".ipt1").val();
                let password = $(".ipt2").val();
                let params = { username, password };
                let { data } = await axios.get(regAPI, { params });
                console.log(data.msg);
                if (data.code == 1) {
                    location.href = "登录.html";
                }
            } else {
                alert("注册失败")
            }

        });

    </script>
</body>

</html>